<template>
  <div class="login">
    <!-- 导航栏 -->
    <!-- 设置左上角箭头,登录页面在不登录状态返回到一个不需要登录页面发现页 -->
    <!-- <van-nav-bar @click-left="$router.push('/home/find')">
      <template #left>
        <i class="iconfont f44"> &#xe637; </i>
      </template>
    </van-nav-bar> -->
    <!-- 对登录页导航栏进行相应改造 -->
    <hmNavBar path="/home/find"> </hmNavBar>
    <div class="content">
      <h3 class="title">您好,请登录</h3>
    </div>

    <van-form ref="form">
      <van-field
        placeholder="请输入手机号"
        :rules="rules.mobile"
        v-model="form.mobile"
        name="mobile"
      >
        <template #left-icon>
          <i class="iconfont pr20">&#xe60b; </i>
        </template>
      </van-field>
      <van-field
        placeholder="请输入验证码"
        :rules="rules.code"
        v-model="form.code"
        name="code"
      >
        <template #left-icon>
          <i class="iconfont pr20">&#xe60c;</i>
        </template>
        <template #button>
          <div class="code" @click="getCode" v-if="totalTime === 6">
            获取验证码
          </div>
          <div class="code" v-else>{{ totalTime }}s后重试</div>
        </template>
      </van-field>
    </van-form>
    <div class="tip">
      登录即同意<span class="tip-color"> 《用户使用协议》</span>和<span
        class="tip-color"
        >《隐私协议》</span
      >
    </div>
    <van-button color="#E40137" block round @click="submit">
      确定
    </van-button>
  </div>
</template>

<script>
/* 导入获取验证码,登录成功api */
import { auCode, auLogin } from '@/api/login.js'
/* 保存token */
import { saveLocal } from '@/utils/local.js'

export default {
  data () {
    return {
      /* 定义一个时间定时器 */
      totalTime: 6,
      form: {
        //	是	string	手机号
        mobile: '',
        //	是	string	验证码
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'onChange' },
          {
            validator: value => {
              const _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              return _reg.test(value)
            },
            message: '请输入正确手机号码',
            trigger: 'onChange'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'onChange' }]
      }
    }
  },
  methods: {
    /*
    1.删除.then在then前面方法加个await
    2.定义一个变量=await的方法返回值(没有返回值就不用理了)
    3.


    */

    /* 获取验证码 */
    /* 点击获取验证码表单验证过后调用api获取验证码 */
    async getCode () {
      try {
        await this.$refs.form.validate('mobile')
        // .then(() => {
        /* 倒计时定时器 */
        this.totalTime--
        let _time = setInterval(() => {
          this.totalTime--
          if (this.totalTime <= 0) {
            this.totalTime = 6
            clearInterval(_time)
          }
        }, 1000)
        const res = await auCode({
          mobile: this.form.mobile
        })
        // .then(res => {
        this.$toast.success(res.data.data)
        window.console.log(res)
        // })
        // this.$toast.success('验证成功')
        // })
      } catch {
        // .catch(() => {
        this.$toast.fail('验证失败')
        // })
      }
    },
    /* 确定按钮点击 */
    async submit () {
      try {
        await this.$refs.form.validate()
        // .then(() => {
        /* 验证成功后调用api */
        auLogin(this.form).then(res => {
          this.$toast.success('登录成功')
          window.console.log('登录信息', res)
          /* 登录成功后保存token */
          saveLocal(res.data.data.jwt)
          /* 保存用户信息到vuex,需要vuex定义相应方法 */
          this.$store.commit('setUserInfo', res.data.data.user)
          /* 在登录成功后修改vuex中的登录状态 */
          this.$store.commit('setLoginStatus', true)

          /* 登录成功后,如果有redirect路由传值就回到redirect页面,没有就直接进入my页面 */
          const _redirect = this.$route.query.redirect
          if (_redirect) {
            this.$router.push(_redirect)
          } else {
            this.$router.push('/home')
          }
        })
        // })
      } catch {
        // .catch(() => {
        this.$toast.fail('验证失败')
        // })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/* scoped 加了scoped:只管当前组件和子组件的最外层,不加就是全局 */
.login {
  .content {
    padding: 0 @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-top: 50px;
      margin-bottom: 65px;
    }
  }
  .pr20 {
    margin-right: 20px;
  }
  .code {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #00b8d4;
    line-height: 23px;
    letter-spacing: 0px;
  }
  .tip {
    margin-left: 20px;
    margin-top: 27px;
    margin-bottom: 44px;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #181a39;
    line-height: 16px;
    letter-spacing: 0px;
  }
  .tip-color {
    color: #00b8d4;
  }
}
</style>
